<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="提供根据汉字查海南话发音服务">
    <meta name="author" content="Sharp">
    <link rel="shortcut icon" href="../img/logo_small.png">
    <title>海南话发音查询</title>


    <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet" >


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 40px;
  background-color: #f8fcff;
}

.form-signin {
  width: 100%;
  height: 200px;
  max-width: 550px;
  padding: 5px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}



.btn-primary {
    color: #fff;
    background-color: #917dba;
    border-color: #917dba;
}
        
.result {
    font-size: 20px;
    margin:20px;
}

    </style>
  </head>
  <body class="text-center">
    <div class="form-signin text-center">



<div style="padding-bottom: 30px;margin-top: -100px;">
  <h1 class="h3 mb-3 font-weight-normal" ><a href="./index.html">海南话发音查询</a></h1>
</div>
  <div style="width: 80%;margin:0 auto;">
  <input type="search" align="center" id="ipa-text" class="form-control" placeholder="输入汉字查海南话发音" required autofocus>
  <!-- <button class="btn btn-primary" type="button" id="submit">查询</button> -->
  </div>
  <div class="checkbox mb-3" id="searchHint">
    <div  style="color: grey;margin:0 auto;padding-top: 10px;">
      如查询：<a onclick="$('#ipa-text').val('五指山');queryServer();">五指山</a>
      、<a onclick="$('#ipa-text').val('山兰酒');queryServer();">山兰酒</a>
      、<a onclick="$('#ipa-text').val('雷公马');queryServer();">雷公马</a>
      、<a onclick="$('#ipa-text').val('摩托车');queryServer();">摩托车</a>
      
      
    </div>
  </div>
  
  <div class="result"></div>
  <div><img id="warped_image"></div>
<!--   <div id="ocr" style="width: 400px"></div> -->

<div id="audioplayBoard" style="padding: 10px; color: white;width:100%;align-items: center;text-align: center; display: none; ">
            <div class="audio" >
                <div ><audio id="audioPlayer" autoplay="true" controls></audio></div><div onclick="$(this).hide()" style="text-align:center;color: #80808094;">如果未自动播音请手动播放</div>
            </div>
  <div class="error"></div>
</div>


<div id="info" style="position: fixed;bottom: 0;right: 0;padding: 10px; color: white;width:100%;align-items: center;text-align: center; ">
  <p class="mt-5 mb-3 ext-muted" style="padding-bottom:30px"><a class="text-muted" href="./rule.html">发音表</a></p>
  <p class="mt-3 mb-3 text-muted">&copy; 2023 | <a class="text-muted" href="./intro.html">关于本站</a>

<div style="visibility: hidden;display: none;">
<script>
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JxT86adBgh45Uri0",ck:"JxT86adBgh45Uri0"});
</script>
</div>

  </p>
</div>

</div>



<script src="../js/jquery.min.js"></script>
<script src="../js/main.js"></script>

</body>
</html>
